/* eslint-disable react/no-array-index-key */
import React, { useState, useRef, useEffect, forwardRef } from 'react'
import SwiperLayout from '@/components/Common/SwiperLayout'
import type { SwiperLayoutRef } from '@/components/Common/SwiperLayout'
import { generateSwiperPages } from '@/pages/report/teacher/utils'
import { Swiper } from 'antd-mobile'
import {
    FirstPage,
    TrainInfoPage,
    ProjectPage,
    TeacherTrainPage,
    StatisticsPage,
    TcProjectPage,
    FootprintPage,
    StudentTypePage,
} from './pages'
import type { SwiperRef } from 'antd-mobile/es/components/swiper'
import { observer, useLocalObservable } from 'mobx-react'
import Store from './store'
import Generate from '@/pages/report/common/generate'
import {
    FirstPlatformDetail,
    SecondPlatformDetail,
    ThirdPlatformDetail,
} from '../common/PlatformDetail'
import { PlatformData } from '../common/PlatformData'
import type { SwiperRecordType } from './interface'

const ForwardLayoutRef = forwardRef(SwiperLayout)

export const DepartmentReport = observer(() => {
    const store = useLocalObservable(() => new Store())
    const ref = useRef<SwiperRef>(null)
    const layoutRef = useRef<SwiperLayoutRef>(null)

    const [current, setCurrent] = useState<number>(0) /**当前选中的swiper下标 */
    const [projectArr, setProjectArr] = useState<SwiperRecordType[]>([])
    const [tcProjectArr, setTcProjectArr] = useState<SwiperRecordType[]>([])
    const [footArr, setFootArr] = useState<SwiperRecordType[]>([])

    /** 下一个 */
    const onNext = () => {
        ref.current?.swipeNext()
    }

    useEffect(() => {
        const {
            course_student_module,
            course_teacher_module,
            region_student_module,
            is_show_course_student,
            is_show_course_teacher,
            is_show_region_student,
        } = store.dataSource || {}
        /** 动态扩展  开展学员培训的年度培训项目 swiper数量 */
        if (is_show_course_student && Array.isArray(course_student_module)) {
            setProjectArr(generateSwiperPages(course_student_module, ProjectPage))
        }
        /** 动态扩展  开展师资培训的年度培训项目 swiper数量 */
        if (is_show_course_teacher && Array.isArray(course_teacher_module)) {
            setTcProjectArr(generateSwiperPages(course_teacher_module, TcProjectPage, 5))
        }
        /** 动态扩展  脚印 swiper数量 */
        if (is_show_region_student && Array.isArray(region_student_module)) {
            setFootArr(generateSwiperPages(region_student_module, FootprintPage))
        }
    }, [store.dataSource])

    const swiperList = [
        {
            component: FirstPage,
            isShow: true,
        },
        {
            component: TrainInfoPage,
            isShow: store.dataSource.is_show_basic_student,
        },
        ...projectArr,

        ...footArr,

        {
            component: StudentTypePage,
            isShow: store.dataSource.is_show_category_student,
        },
        {
            component: StatisticsPage,
            isShow: store.dataSource.is_show_quarter_student,
        },
        {
            component: TeacherTrainPage,
            isShow: store.dataSource.is_show_student_foster,
        },
        ...tcProjectArr,
        {
            component: FirstPlatformDetail,
            isShow: true,
        },
        {
            component: SecondPlatformDetail,
            isShow: true,
        },
        {
            component: ThirdPlatformDetail,
            isShow: false,
        },
        {
            component: PlatformData,
            isShow: true,
        },
        {
            component: Generate,
            isShow: true,
            props: {
                type: 'department',
            },
        },
    ].filter(v => Boolean(v.isShow))

    return (
        <ForwardLayoutRef
            ref={layoutRef}
            onNext={onNext}
            showFooter={current < swiperList.length - 1}
        >
            <Swiper
                loop={false}
                ref={ref}
                // autoplay
                autoplayInterval={6000}
                style={{
                    '--height': '100vh',
                }}
                defaultIndex={0}
                direction="vertical"
                onIndexChange={v => {
                    layoutRef.current?.onPlay(v)
                    setCurrent(v)
                }}
                indicator={() => null}
            >
                {swiperList.map(({ component, props = {} }, index) => {
                    const Children = component
                    return (
                        <Swiper.Item key={index}>
                            <Children
                                itemIndex={index}
                                store={store}
                                current={current}
                                {...props}
                            />
                        </Swiper.Item>
                    )
                })}
            </Swiper>
        </ForwardLayoutRef>
    )
})

export default DepartmentReport
